import React, { useEffect, useCallback, useState } from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/core/styles/makeStyles';
import clsx from 'clsx';
import { usePage } from '@/hooks/page';
import {
  Container,
  Tabs,
  Tab,
  Paper,
  AppBar,
  Zoom,
  Grid,
} from '@material-ui/core';
import StoreyTitle from '@/component/StoreyTitle';
import OpeningSoon from '@/component/OpeningSoon';
import { useStore } from 'reto';
import User from '@/store/user';
import FriendItem from '@/component/FriendItem';
import Friend from './component/Friend';

const useStyles = makeStyles({
  root: {},
  container: {
    padding: 0,
  },
  appBar: {
    backgroundColor: 'white',
  },
  appBarTitle: {
    padding: '16px',
  },

  content: {
    minHeight: '400px',
    padding: '16px',
  },
});

interface IProps {}

const Fav: React.FC<IProps> = props => {
  const classes = useStyles();
  const [value, setValue] = useState(0);
  const [hide, setHide] = useState(true);
  usePage({
    appBarStyle: 'none',
  });

  const handleChange = useCallback(
    (event: React.ChangeEvent<{}>, newValue: number) => {
      if (value !== newValue) {
        setValue(newValue);
        setHide(false);
      }
    },
    [value],
  );

  const handleExited = useCallback(() => {
    setHide(true);
  }, []);

  // const userData = useStore(User).user
  const userData = {
    name: 'adbin',
    face: 'http://q1.qlogo.cn/g?b=qq&nk=1092590592&s=640',
    sign: '这个人很懒，什么都没留下',
  };

  return (
    <div>
      <Container className={classes.container}>
        <Paper>
          <Typography variant="h6" className={classes.appBarTitle}>
            我的小收藏
          </Typography>
          <Tabs
            value={value}
            onChange={handleChange}
            indicatorColor="primary"
            textColor="primary"
          >
            <Tab label="小伙伴" />
            <Tab label="小文章" />
            <Tab label="小项目" />
          </Tabs>
        </Paper>

        <Box marginTop={3}>
          {(!hide || value === 0) && (
            <Zoom in={value === 0} key="0" onEnter={handleExited}>
              <Paper className={classes.content}>
                <Friend />
              </Paper>
            </Zoom>
          )}
          {(!hide || value === 1) && (
            <Zoom in={value === 1} key="1" onEnter={handleExited}>
              <Paper elevation={4}>
                <OpeningSoon />
              </Paper>
            </Zoom>
          )}
          {(!hide || value === 2) && (
            <Zoom in={value === 2} key="2" onEnter={handleExited}>
              <Paper elevation={4}>
                <OpeningSoon />
              </Paper>
            </Zoom>
          )}
        </Box>
      </Container>
    </div>
  );
};

export default Fav;
